<template>
  <div id="contentRight">
    <section id="sec1">
      <p class="p1">
        <span>邀请好友</span>
        <img src="../common/imgs/invitedTopBanner.png" alt="">
      </p>
    </section>
    <section id="sec2">
      <div class="d1">
        <span class="s1">我的专属分享方式</span>
        <span class="hoverhand showEeweima">
          <img src="../common/imgs/invitederweimaicon.png" alt=""  @mouseenter="showItemWwm($event)" @mouseout="showWWm = false">
        </span>
      </div>
      <div class="abWWm" v-show="showWWm">
        <span id="qrcode" ref="qrCodeUrl"></span>
        <p>扫码分享</p>
      </div>
      <div class="d2">
        <div class="clm">
          <div class="d1">
            <p class="title">注册链接</p>
            <p class="content">
              <input type="text" readonly v-model="inviter_uri">
              <button :data-clipboard-text="inviter_uri" id="copy1" @click="copyInfo('#copy1')">复制</button>
            </p>
          </div>
          <div class="d2">
            <p class="title">邀请码</p>
            <p class="content">
              <input type="text" readonly v-model="inviter_code">
              <button :data-clipboard-text="inviter_code" id="copy2" @click="copyInfo('#copy2')">复制</button>
            </p>
          </div>
        </div>
<!--        <div class="clm">-->
<!--          <div class="d3">-->
<!--            <p class="title">被邀请人邮箱</p>-->
<!--            <p class="content">-->
<!--              <input type="text" placeholder="请输入被邀请人邮箱地址" v-model="email">-->
<!--            </p>-->
<!--          </div>-->
<!--        </div>-->
      </div>
<!--      <p class="p3">-->
<!--        <button>发 送</button>-->
<!--      </p>-->
    </section>
    <section id="sec3">
      <p class="p1">邀请统计</p>
      <div class="d2">
        <span class="s1">
          <span class="left">累计邀请注册</span>
          <span class="right">{{inviteNum}}人</span>
        </span>
        <span class="s1">
          <span class="left">累计下单人数</span>
          <span class="right">{{orderPeople}}人</span>
        </span>
      </div>
      <div class="d3">
        <span class="title">当月邀请</span>
        <span class="content">
          <span class="left">当月BTC总订单:</span>
          <span class="right">{{totalAsset}} CNY</span>
        </span>
        <span class="content">
          <span class="left">当月IPFS总订单:</span>
          <span class="right">{{ipfs_total}} CNY</span>
        </span>
        <div class="selDate">
          <span class="prev" @click="getMouth('left')">上一月</span>
          <span class="date">{{year}}-{{mouth}}</span>
          <span class="next" @click="getMouth('right')">下一月</span>
        </div>
      </div>
      <table class="inviteList">
        <thead>
          <tr>
            <td>注册时间</td>
            <td>注册账户</td>
            <td>当月BTC下单</td>
            <td>当月IPFS下单</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item , index) in invitedList">
            <th>{{item.create_time}}</th>
            <th>{{item.phone}}</th>
            <th>{{item.asset}} CNY</th>
            <th>{{item.ipfs_amount}} CNY</th>
          </tr>
        </tbody>
      </table>
      <div class="pagination" v-if="invitedList.length > 0">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          layout="prev, pager, next, jumper"
          :page-count="totalNum">
        </el-pagination>
      </div>
      <div class="noData" v-if="invitedList.length === 0">
        <img src="../common/imgs/billNull.png" alt="空">
        <p>暂无数据</p>
      </div>
    </section>
  </div>
</template>
<script>
  import {  invitedData , inviterList } from '../http/api';
  export default {
    name : 'invited',
    data(){
      return{
        email : null,//邮箱
        tabbar : 0, //tabbar index
        totalNum : 10, //总数量
        currentPage : 1,//当前页数
        inviter_code : null,
        inviter_uri : null,
        showWWm : false,
        wwmStyle : {},
        invitedList:[],
        year : null,
        mouth : null,
        orderPeople : null,
        inviteNum : null,
        totalAsset : null,
        ipfs_total : null,
      }
    },
    components:{
      //DatePicker :  require('element-ui').DatePicker , /*DatePicker*/
      ElPagination : require('element-ui').Pagination , /*ElPagination*/
    },
    mounted() {
      let not = { noLoading : true , noToast : true};
      let thiz = this;
      let https = [
        invitedData(not).then(res => {
          if(res.code == 200){
            let data = res.data;
            this.inviter_uri = data.inviter_uri;
            this.inviter_code = data.inviter_code;
          }
        }),
        thiz.getMouth(),
      ];
      thiz.PromiseAll(https);
    },
    methods : {
      getInviteList( noLoading ){
        let param = {
          page: this.currentPage,
          // type: is_display,
          month: this.mouth,
          year: this.year
        };
        if (noLoading){
          param.noLoading = true ;
          param.noToast = true;
        }
        return inviterList(param).then(res => {
          if(res.code == 200){
            let data = res.data;
            let lists = data.lists.invitationList;
            this.totalNum = data.lists.totalPage;
            this.inviteNum = data.lists.inviteNum;
            this.orderPeople = data.lists.orderPeople;
            this.totalAsset = data.lists.totalAsset;
            this.ipfs_total = data.lists.ipfs_total;
            lists.map(function (item) {
              item.create_time = item.regTime.split(" ")[0];
              item.time_creatper = item.operateTime ? item.operateTime.split(" ")[0] : "--";
              item.retentionBonus = item.retentionBonus || 0;
              item.commission_power = item.commissionPower || 0;
              item.prizePower = item.prizePower || 0;
            });
            this.invitedList = lists;
          }
        })
      },
      getMouth( type ){
        let thiz = this;
        if(type){
          let isPrev = null ;
          if(type){
            isPrev = type === 'left' ? 1 : 2; //是否是  前一月  /  后一月
          }
          let month = this.mouth;
          let year = this.year;
          if (isPrev === 1) {
            let  dataMonth = Number(thiz.accSub(month, 1)) < 10 ? ("0" + thiz.accSub(month, 1)) :thiz.accSub(month, 1);
            if (Number(dataMonth) < 1) {
              thiz.year = thiz.accSub(year, 1);
              dataMonth = "12"
            }
            this.mouth = dataMonth;
          } else {
            let dataMonth = Number(thiz.accAddMore(month, 1)) < 10 ? ("0" + thiz.accAddMore(month, 1)) : thiz.accAddMore(month, 1);
            if (Number(dataMonth) > 12) {
              thiz.year = thiz.accAddMore(year, 1);
              dataMonth = "01"
            }
            this.mouth = dataMonth;
          }
        }
        else {
          let default_year = new Date().getFullYear();//当前年份
          let default_mouth = Number(thiz.accAddMore(new Date().getMonth(), 1)) < 10 ? ("0" + thiz.accAddMore(new Date().getMonth(), 1)) : thiz.accAddMore(new Date().getMonth(), 1);//当前月份
          thiz.year = default_year;
          thiz.mouth = default_mouth;
        }
        return this.getInviteList( type ? false : true);
      },
      showItemWwm(e){
        this.showWWm = true;
        let QRCode = require('qrcodejs2');
        document.getElementById("qrcode").innerHTML = "";
        let thiz = this;
        new QRCode(thiz.$refs.qrCodeUrl, {
          text: thiz.inviter_uri,
          width: 85,
          height: 85,
          colorDark: '#000000',
          colorLight: '#ffffff',
          correctLevel: QRCode.CorrectLevel.H
        });
      },
      copyInfo(id){
        require('../common/js/copy').copy({id: id , toast: '复制成功'});
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.getInviteList();
      }
    }
  }
</script>
<style lang="less" scoped>
  @import "../common/style/common";
  @import "../common/style/public.css";
  #contentRight{
    padding-bottom: 59px;
  }
  #sec1{
    padding: 0;overflow: hidden;
    >.p1{
      height: 224px;text-align: right;background: #3C4156;overflow: hidden;
      >img{
        height: 100%;float: right;
      }
      >span{
        float: left;color: #fff;font-size: 32px;line-height: 224px;padding-left: 48px;
      }
    }
  }
  #sec2{
    margin-top: 14px;padding-top: 19px;padding-bottom: 26px;position: relative;
    >.abWWm{
      width: 120px;height: auto;position:absolute;z-index: 1;padding: 10px;.borderRadius(5px);background: #fff;padding-bottom: 0;
      box-shadow: 0px 0px 20px #c4bebe;right: 20px;top:57px;
      &:before{
        content: '';display: block;width: 0px;height: 0px;
        position: absolute;
        top: -10px;
        right: 15px;
        border: 5px solid#fff;
        border-color: transparent transparent #fff;
      }
      >span , /deep/ img , /deep/ span{
        width: 100%;height: 100px;padding: 0;margin: 0;display: inline-block;
      }
      >p{
        text-align: center;font-size: 12px;line-height: 25px;height: 25px;color: rgba(38, 38, 38, 0.7);
      }
    }
    >.d1{
      overflow: hidden;
      >.s1{
        float: left;line-height: 23px;color: #262626;font-size: 18px;
      }
      >.showEeweima{
        float: right;display: inline-block;width: 23px;height: 23px;
        >img{
          width: 100%;height: 100%;
        }
      }
    }
    >.d2{
      padding-top: 32px;
      >.clm{
        overflow: hidden;padding-top: 23px;
        &:first-child{
          padding-top: 0;
        }
        >div{
          float: left;
          &:nth-child(even){
            float: right;
          }
          .title{
            color: #999999;font-size: 14px;
          }
          .content{
            padding-top: 12px;overflow: hidden;
            >input{
              .input;height: 38px;float: left;padding: 0 9px;
            }
            >button{
              .submit;width: 42px;height: 38px;font-size: 14px;line-height: 38px;float: left;margin-left: 10px;
            }
          }
          &.d1>.content{
            >input{
              width: 506px;
            }
          }
          &.d2>.content{
            >input{
              width: 316px;
            }
          }
          &.d3>.content{
            >input{
              width: 551px;
            }
          }
        }
      }
    }
    >.p3{
      padding-top: 15px;
      >button{
        .submit;width: 160px;height: 38px;line-height: 38px;font-size: 14px;
      }
    }
  }
  #sec3{
    margin-top: 14px;min-height: 300px;
    >.p1{
      font-size: 20px;
    }
    >.d2{
      height: 36px;background: #F8F8F8;padding-left: 20px;margin-top: 15px;.borderRadius;
      >span{
        display: inline-block;line-height: 36px;
        &:last-child{
          padding-left: 34px;
        }
        >.left{
          color: #9A9A9A;font-size: 16px;
        }
        >.right{
          font-size: 16px;.colorYellow;padding-left: 5px;
        }
      }
    }
    >.d3{
      padding-top: 35px;
      >.title{
        color: #262626;font-size: 16px;padding-right: 18px;position: relative;line-height: 28px;height: 28px;float: left;
        &:after{
          content: '';display: inline-block;height: 100%;width: 1px;background: #E5E5E5;position: absolute;right: 9px;top: 0;
        }
      }
      >.content{
        line-height: 28px;height: 28px;float: left;
        >.left{
          color: #9A9A9A;font-size: 14px;
        }
        >.right{
          color: #5A5A5A;font-size: 14px;
        }
        &:nth-child(2){
          padding-right: 25px;
        }
      }
      >.selDate{
        float: right;
        >.prev,>.next{
          .colorYellow;text-decoration: underline;line-height: 28px;height: 28px;float: left;font-size: 14px;
          &:hover{
            cursor: pointer;
          }
        }
        >.date{
          line-height: 28px;height: 28px;float: left;background: #F8F8F8;padding: 0 10px;.borderRadius(2px);display: inline-block;
          margin: 0 12px;color: #5A5A5A;font-size: 14px;
        }
      }
    }
    >.inviteList{
      width: 100%;
      tr{
        td,th{
          font-weight: 500;text-align: center;
          &:first-child{
            text-align: left;
          }
          &:last-child{
            text-align: right;
          }
        }
        td{
          color: #9A9A9A;font-size: 14px;padding-top: 28px;padding-bottom: 20px;
        }
        th{
          padding: 15px 0;border-bottom: 1px solid#F4F4F6;font-size: 12px;
          &:last-child{
            padding-right: 25px;
          }
        }
      }
      tbody{
        >tr:last-child{
          >th{
            border-bottom: 0;
          }
        }
      }
      thead{
        tr{
          td{
            &:nth-child(2){
              text-align: center;
            }
            &:last-child{
              text-align: right;
            }
          }
        }
      }
      tbody{
        tr{
          th{
            &:last-child{
              text-align: right;padding-right: 0;
            }
            &:nth-child(2){
              text-align: center;
            }
          }
        }
      }
    }
    >.pagination{
      text-align: right;padding-top: 25px;
      /deep/ .el-input{
        width: 50px;
        >input{
          width: 100%;
        }
      }
    }
    >.noData{
      text-align: center;font-size: 0;padding: 50px 0;
      >img{
        width: 100px;
      }
      >p{
        color: #999;font-size: 14px;
      }
    }
  }
</style>
